<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            text-decoration: none;
            list-style: none;
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }

        .station_video {
            margin-top: 10px;
        }

        .video_list {
            column-count: 5;
            padding: 0 10px;
            column-gap: 0px;
            flex-wrap: wrap;
        }

        .video_list li {
            padding: 10px;
            height: 100%;
            overflow: auto;
        }

        .video_list li img {
            width: 100%;
        }

        @media (max-width: 1440px) {
            .video_list {
                column-count: 4;
            }
        }

        @media (max-width: 1075px) {
            .video_list {
                column-count: 3;
            }
        }

        @media (max-width: 768px) {
            .video_list {
                column-count: 2;
            }
        }
    </style>
</head>

<body>
<div class="station_video">
    <h2>本站视频</h2>
    <ul class="video_list" id="video_list">

    </ul>
</div>
<script>
    fetch('/video_row', {method: 'GET'}).then(resp => {
        resp.json().then(data => {
            data.forEach(element => {
                let video_list = document.getElementById('video_list')
                let videoItem = document.createElement('li')
                let itemImg = document.createElement('img')
                let itemTitle = document.createElement('h3')
                let itemVisited = document.createElement('p')
                let itemAuthor = document.createElement('p')
                let itemDesc = document.createElement('p')
                let itemHref = document.createElement('a')

                itemImg.setAttribute('src', element.cover)
                itemVisited.textContent = '浏览量：' + element.visit
                itemAuthor.textContent = '作者：' + element.authorId
                itemTitle.textContent = element.title
                itemDesc.textContent = element.description
                itemHref.setAttribute('href', '/video_room.html?video_uuid=' + element.uuid)
                itemHref.setAttribute('target', '_blank')

                itemHref.appendChild(itemImg)
                itemHref.appendChild(itemTitle)
                itemHref.appendChild(itemDesc)
                itemHref.appendChild(itemVisited)
                itemHref.appendChild(itemAuthor)
                videoItem.appendChild(itemHref)
                video_list.appendChild(videoItem)
            });
        })
    }).catch(err => {
        alert('获取视频列表失败')
    })
</script>
</body>

</html>